<script setup lang="ts">
import { computed, inject } from "vue";
import type { TagType } from "vant";
import { APPROVE_TYPE_DETAIL_API_MAP } from "../constants";
import { ProcessTypeEnum, ApprovalStatusEnum, ApprovalStatusMap } from "@/views/approveList/constants";
import CellGroup from "@/components/CellGroup/index.vue";

const item = APPROVE_TYPE_DETAIL_API_MAP[ProcessTypeEnum.PUR];
const detail = inject("detail") as any;

/** 附件 */
const attachmentArray = computed(() => {
	return !!detail.value.attachment ? detail.value.attachment.split(",") : [];
});
</script>

<template>
	<CellGroup :mapList="item.detailMap" :detail="detail">
		<template #title>{{ item.title }}</template>
		<template #status v-if="detail.status">
			<van-tag class="tag" size="medium" :type="ApprovalStatusMap[detail.status  as ApprovalStatusEnum].tagType as TagType">
				{{ ApprovalStatusMap[detail.status as ApprovalStatusEnum].text }}</van-tag
			>
		</template>
	</CellGroup>
	<template v-for="(dtl, index) in detail.detailList" :key="index">
		<van-cell-group v-if="detail.pcbFlag === '是'" :title="`研发试制明细(${index + 1})`">
			<van-cell title="物料号" :value="dtl.materialCode ?? '-'" />
			<van-cell title="名称" :value="dtl.materialName ?? '-'" />
			<van-cell title="数量" :value="dtl.amount ?? '-'" />
			<van-cell title="试制原因" :value="dtl.testReason ?? '-'" />
			<van-cell title="是否贴片" :value="dtl.patchFlag ?? '-'" />
			<van-cell title="仓库链接" :value="dtl.repoLink ?? '-'" />
			<van-cell title="是否打过tag" :value="dtl.tagFlag ?? '-'" />
			<van-cell title="备注" :value="dtl.remark ?? '-'" />
		</van-cell-group>

		<!-- 非电控研发部PCB试制 -->
		<van-cell-group v-else :title="`研发试制明细(${index + 1})`">
			<van-cell title="物料号" :value="dtl.materialCode ?? '-'" />
			<van-cell title="产品名称" :value="dtl.materialName ?? '-'" />
			<van-cell title="所需数量" :value="dtl.amount ?? '-'" />
			<van-cell title="规格型号" :value="dtl.specification ?? '-'" />
			<van-cell title="图号" :value="dtl.drawCode ?? '-'" />
		</van-cell-group>
	</template>
	<van-cell-group style="margin-top: 5px">
		<van-cell title="申请原因" :value="detail.applyReason ?? '-'" />
		<van-cell title="产品去向" :value="detail.productDest ?? '-'" />
		<van-cell title="附件"
			><template #value>
				<ul class="attachment-list" v-if="attachmentArray.length">
					<li class="van-ellipsis" v-for="(url, idx) in attachmentArray" :key="idx">
						<span>{{ url.split("/")[url.split("/").length - 1] }}</span>
					</li>
				</ul>
				<span v-else>-</span>
			</template></van-cell
		>
		<van-cell title="需求时间" :value="detail.demandDate ?? '-'"> </van-cell>
		<van-cell title="总物料号" :value="detail.materialCode ?? '-'" />
		<van-cell title="总施工号" :value="detail.constructNo ?? '-'" />
	</van-cell-group>
</template>

<style scoped lang="less">
:deep(.van-cell) {
	.van-cell__title {
		width: 115px;
		flex: auto;
		flex-grow: 0;
		flex-shrink: 0;
	}

	.van-cell__value {
		white-space: pre-wrap;
		text-align: left;
	}
}
</style>
